<template>
    <div class="goodsList">
      <div class="content">
        <div class="good-list-box">
          <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              v-model:error="error"
              error-text="服务器累了，点击重新加载"
              finished-text="  "
              offset="500"
              :immediate-check="false"
              @load="onLoad"
              :key="2"
            >
              <div class="good-list">
                <div
                  class="good-item"
                  v-for="(value, index) in items"
                  :key="index"
                  :sku="value.F_ProductId"
                  :hei="index"
                >
                  <!-- <a class="good-card" :href="'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'+($store.state.userInfo.F_Question?'?parents_id='+$store.state.userInfo.F_Question:'')"> -->
                  <div
                    class="good-card"
                    @click="
                      $router.push({
                        path: '/product',
                        query: { id: value.F_ProductId, parents_id: username },
                      })
                    "
                  >
                    <van-image
                      class="product-img lazy-img"
                      lazy-load
                      :src="'http://higuang365.com/' + value.F_pic_url"
                    />
                    <div class="good-desc">
                      <div class="title">{{ value.F_Name }}</div>
                      <div class="county">
                        <img
                          class="county-icon"
                          v-if="value.F_yuliu2"
                          :src="'http://higuang365.com/' + value.F_yuliu2"
                          alt=""
                        />
  
                        <div class="county-title">
                          {{ value.F_BrandCountrie }}
                        </div>
                      </div>
                      <div class="price-box">
                        <span class="timelimit">新品</span>
                        <div>
                          <span class="price"
                            >¥ <span>{{ value.F_BdPrice }}</span></span
                          >
                          <span class="estimate">￥{{ value.F_Price }}</span>
                        </div>
                      </div>
  
                      <div
                        class="share"
                        @click.stop="
                          addGoodsCart(value.F_yuliu3, value.F_ProductId)
                        "
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </div>
  </template>
  <script>
  import {
    defineComponent,
    reactive,
    toRefs,
    onActivated,
    onDeactivated,
  } from "vue";
  import { GetTagGoodsList } from "@/api/home";
  import { getCookie, addGoodsCart } from "@/lib/ecapi";
  export default defineComponent({
    name: "electrical",
    setup() {
      const data = reactive({
        items: [],
        error: false,
        loading: false,
        finished: false,
        Refresh: false,
        pageNum: 1,
        pageSize: 20,
        username: getCookie("S[MEMBER]"),
      });
      const onLoad = async () => {
        const res = await GetTagGoodsList({
          pageNum: data.pageNum,
          pageSize: data.pageSize,
          tag_id: "54",
          strlv: getCookie("MLV"),
        });
        // console.log(res);
        if (!res[0]) {
          data.error = true;
          data.loading = false;
          return;
        }
        data.items.push(...res[1]);
        data.loading = false;
        data.pageNum += 1;
        if (res[1].length < data.pageSize) {
          data.finished = true;
        }
      };
      const onRefresh = () => {
        data.items = [];
        data.pageNum = 1;
        data.finished = false;
        onLoad();
      };
      // if(data.items.length==0){
      //         onLoad();
      // }
      let rushbuyScroll = 0;
      onActivated(() => {
        // console.log(rushbuyScroll);
        if (data.items.length == 0) {
          onLoad();
        }
        document.getElementById("app").scrollTop = rushbuyScroll;
      });
      onDeactivated(() => {
        //  console.log(rushbuyScroll)
        rushbuyScroll = document.getElementById("app").scrollTop;
      });
      return { ...toRefs(data), addGoodsCart, onLoad, onRefresh };
    },
  });
  </script>
  
  <style lang="scss" scoped>
  .goodsList {
    padding: 0 0 3rem;
    .good-list {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      width: calc(100vw - 2rem);
      margin: auto;
    }
    .good-item {
      box-sizing: border-box;
      width: 100%;
      margin: 0.5rem;
      background: #fff;
      border-radius: 1rem;
      overflow: hidden;
      animation: jello-horizontal 1s both;
      .good-card {
        height: 100%;
        display: flex;
      }
      .product-img {
        display: block;
        min-width: 12rem;
        width: 12rem;
        height: 12rem;
        border-radius: 1rem;
        overflow: hidden;
      }
      .good-desc {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex-grow: 1;
        text-align: left;
        font-size: 1.2rem;
        padding: 1rem 1rem 0;
        position: relative;
        .county {
          display: flex;
          .county-icon {
            width: 2rem;
            height: 100%;
          }
          .county-title {
            color: #999;
            margin-left: 0.5rem;
          }
        }
  
        .title {
          font-size: 1.3rem;
          // height: 3.2rem;
          line-height: 2rem;
          letter-spacing: 0.5px;
          margin-top: 2px;
          color: #222333;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .price-box {
          width: 15rem;
          background: url("")
            no-repeat;
          background-size: contain;
          padding: 0.2rem 1rem;
          display: flex;
          justify-content: space-between;
        }
        .price {
          font-size: 1.3rem;
          // color: #ff0036;
          color: #fff;
          font-weight: bold;
          line-height: 2.5rem;
          span {
            font-size: 1.7rem;
          }
        }
        .timelimit {
          float: right;
          line-height: 2.6rem;
          color: #b86011;
        }
        .share {
          height: 2.5rem;
          width: 2.5rem;
          position: absolute;
          right: 1rem;
          bottom: 1rem;
          z-index: 10;
          // background-color: #ff1f10;
          // background-image: none;
          // mask: url(http://higuang365.com/public/images/common/shop/i-miaosha-red.e6c30bae.png) no-repeat;
          // mask-size: 100% 100%;
          background: url("http://higuang365.com/public/images/common/shop/i-miaosha-red.png")
            no-repeat;
          background-size: contain;
        }
        .estimate {
          color: #c5c5c5;
          text-decoration: line-through;
          margin-left: 0.5rem;
        }
      }
    }
  }
  </style>
  